<script setup>
    // 1.导入
    import {useTodoStore} from '@/store/todo.js'
    import {ref} from "vue"
    // 2.创建
    const todo = useTodoStore()

    // 清除所有已完成的任务
    const clear = () => {
        // 判空
        if(todo.unfinishedCount === todo.todos.length) {
            return alert("已完成任务列表为空，无需删除。")
        }
        // 询问，通过后调用仓库方法进行删除
        if(window.confirm("确认删除所有已完成任务吗？")) {
            todo.clear()
        }
    }
    // 定义视图状态
    const TYPE = {
        All: "All",
        Active: "Active",
        Completed: "Completed"
    }
</script>
<template>
    <footer class="footer">
        <span class="todo-count"><strong>{{ todo.unfinishedCount }}</strong> item left</span>
        <ul class="filters">
            <li>
                <a href="#/" 
                :class="{selected: todo.type === TYPE.All}"
                @click="todo.modifyType(TYPE.All)">All</a>
            </li>
            <li>
                <a href="#/active" 
                :class="{selected: todo.type === TYPE.Active}"
                @click="todo.modifyType(TYPE.Active)"
                >Active</a>
            </li>
            <li>
                <a href="#/completed" 
                :class="{selected: todo.type === TYPE.Completed}"
                @click="todo.modifyType(TYPE.Completed)"
                >Completed</a>
            </li>
        </ul>
        <button class="clear-completed" @click="clear()">
        Clear completed
        </button>
    </footer>
</template>